<!DOCTYPE html>
<html>

<head>
    <title>ScalarField / color</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <link rel="stylesheet" href="//unpkg.com/leaflet@1.2.0/dist/leaflet.css" />
    <link rel="stylesheet" href="examples.css" />

    <link href="https://fonts.googleapis.com/css?family=Roboto:100,400" rel="stylesheet">
</head>

<body>
    <h1 class="title mapTitle">ScalarField styles</h1>
    <div id="map"></div>

    <div id="floating-panel">
        <ul>
            <li id="gradientPanel">
                <label>Gradient</label>
                <input type="color" id="lowColor" value="#FFFFFF">
                <input type="color" id="highColor" value="#000000">
            </li>

            <li id="colorBrewerPanel" style="display:none;">
                <label>Palettes</label>
                <!-- some color scales... (for a full list see: https://github.com/gka/chroma.js/wiki/Predefined-Colors) -->
                <select id="colorBrewer">
                    <option>OrRd</option>
                    <option>PuBu</option>
                    <option>BuPu</option>
                    <option>Oranges</option>
                    <option>RdPu</option>
                    <option>YlGnBu</option>
                    <option>GnBu</option>
                    <option>PuRd</option>
                    <option>PuBuGn</option>
                    <option>Spectral</option>
                    <option>RdYlGn</option>
                    <option>PiYG</option>
                    <option>Paired</option>
                </select>
            </li>

            <li id="classesPanel" style="display:none;">
                <label>Nº classes</label>
                <input id="classes" type="text" value="5" style="width: 15px">
            </li>
        </ul>
    </div>

    <!-- CDN -->
    <script src="//d3js.org/d3.v4.min.js"></script>
    <script src="//npmcdn.com/leaflet@1.2.0/dist/leaflet.js"></script>
    <!--<script src="leaflet-src.js"></script>-->
    <script src="//cdnjs.cloudflare.com/ajax/libs/chroma-js/2.1.0/chroma.min.js"></script>

    <!-- Plugin -->
    <script src="dist/leaflet.canvaslayer.field.js"></script>

    <script>
        var map = L.map('map');

        /* Basemap */
        var url = 'https://cartodb-basemaps-{s}.global.ssl.fastly.net/dark_nolabels/{z}/{x}/{y}.png';
        L.tileLayer(url, {
            attribution: 'CartoDB & OSM',
            subdomains: 'abc',
            maxZoom: 19
        }).addTo(map);

        /*
            Some ScalarField layers with custom styles
        */
        d3.text('data/Bay_Speed.asc', function (asc) {
            var s = L.ScalarField.fromASCIIGrid(asc);

            var layer1 = L.canvasLayer.scalarField(s, {
                color: chroma.scale(['white', 'black']).domain(s.range),
                mouseMoveCursor: null
            }).addTo(map);
            map.fitBounds(layer1.getBounds());

            var layer2 = L.canvasLayer.scalarField(s, {
                color: chroma.scale('OrRd').domain(s.range),
                mouseMoveCursor: null
            });

            var layer3 = L.canvasLayer.scalarField(s, {
                color: chroma.scale('OrRd').classes(5),
                mouseMoveCursor: null
            });

            var layers = {
                'Two colors gradient': layer1,
                'ColorBrewer2': layer2,
                'Classes (n-equidistant)': layer3
            };

            L.control.layers(layers, {}, {
                position: 'bottomleft',
                collapsed: false
            }).addTo(map);


            /* Dynamic styles */
            //      gradient with two colors
            let gradientColors = document.getElementsByTagName('input[type=color]');
            let low = document.getElementById('lowColor');
            let high = document.getElementById('highColor');
            var updateGradient = function () {
                var scale = chroma.scale([low.value, high.value]).domain(s.range);
                layer1.setColor(scale);
            }
            low.addEventListener('input', updateGradient);
            high.addEventListener('input', updateGradient);

            //      colorBrewer scale
            let colorBrewer = document.getElementById('colorBrewer');
            colorBrewer.addEventListener('change', function () {
                var scale = chroma.scale(this.value).domain(s.range);
                layer2.setColor(scale);
            });

            //      classes
            let classes = document.getElementById("classes");
            classes.addEventListener("change", function () {
                var scale = chroma.scale('OrRd').classes(parseInt(this.value));
                layer3.setColor(scale);
            });

            //      enable panels
            map.on('baselayerchange', function (e) {
                let gradientPanel = document.getElementById('gradientPanel');
                gradientPanel.style.display = (e.layer === layer1) ? "block" : "none";

                let colorBrewerPanel = document.getElementById('colorBrewerPanel');
                colorBrewerPanel.style.display = (e.layer === layer2) ? "block" : "none";

                let classesPanel = document.getElementById('classesPanel');
                classesPanel.style.display = (e.layer === layer3) ? "block" : "none";
            });
        });
    </script>
</body>

</html>